<template>
    <div class="box">
        <template v-if="type">
            <div class="table-box">
                <table border="1">
                    <tr>
                        <th colspan="5">入驻商家个人信息归档</th>
                    </tr>
                    <tr>
                        <th>免冠照</th>
                        <th colspan="2">身份证正面照</th>
                        <th colspan="2">身份证背面照</th>
                    </tr>
                    <tr>
                        <td>
                            <van-image
                                    width="86"
                                    height="130"
                                    :src=" Url + mgphotoImg"
                            />
                        </td>
                        <td colspan="2" valign="middle" align="center">
                            <van-image
                                    width="86"
                                    height="60"
                                    :src="Url + IDfrontphotoImg"
                            />
                        </td>
                        <td colspan="2" valign="middle" align="center">
                            <van-image
                                    width="86"
                                    height="60"
                                    :src="Url + IDbackphotoImg"
                            />
                        </td>
                    </tr>
                    <tr>
                        <th>电话号码</th>
                        <th colspan="2">邮箱账号</th>
                        <th colspan="2">支付宝账号</th>
                    </tr>
                    <tr>
                        <td valign="middle" align="center">{{mobile}}</td>
                        <td colspan="2" valign="middle" align="center">{{email}}</td>
                        <td colspan="2" valign="middle" align="center">{{zfbacount}}</td>
                    </tr>
                    <tr>
                        <th>开户人姓名</th>
                        <th colspan="2">银行名称</th>
                        <th colspan="2">银行卡号</th>
                    </tr>
                    <tr>
                        <td valign="middle" align="center">{{realname}}</td>
                        <td colspan="2" valign="middle" align="center">{{bankname}}</td>
                        <td colspan="2" valign="middle" align="center">{{bankcard}}</td>
                    </tr>
                    <tr>
                        <th colspan="5">现居住地址</th>
                    </tr>
                    <tr>
                        <td colspan="5">{{address}}</td>
                    </tr>
                </table>

            </div>
            <div style="margin: 0 15px">
                <van-checkbox v-model="checked" shape="square">
                    请您再次核实并确认您所提交的资料真实、准确、合法、有效，如填写有误请及时更正。如您以上所填写信息有变动或者已过期，请及时联系客服替您更换。如因您填写的信息错误、变动、过期，您又未及时更正或者联系我司客服替你更正，所造成一切后果应由您方独立承担。
                </van-checkbox>
            </div>
            <div style="margin:40px 15px;display: flex;justify-content: space-around;">
                <van-button size="small" type="danger" @click="type = !type">返回修改</van-button>
                <van-button size="small" type="info" @click="submitbtn">确认提交</van-button>
            </div>
        </template>
        <template v-if="!type">
            <van-notice-bar
                    left-icon="volume-o"
                    :text="fwarticle.title"
                    color="#e71500"
                    background="#fff"
                    @click="showFwarticle"
            />
            <van-form @submit="onSubmit">
                <div class="title">请上传您近一个月内免冠彩色半身电子照片，照片不能做任何修饰（比如滤镜、美颜之类的处理）</div>
                <van-field name="uploader">
                    <template #input>
                        <van-uploader :max-count="1" v-model="mgphoto" :after-read="setMgphoto" :delete="delMgphoto"/>
                    </template>
                </van-field>

                <div class="title">请上传您身份证正面照，照片必须是清晰可辨的彩色原件电子版（扫描件或者数码拍摄照片）</div>
                <van-field name="uploader">
                    <template #input>
                        <van-uploader :max-count="1" v-model="IDfrontphoto" :after-read="setIDfrontphoto"
                                      :delete="delIDfrontphoto"/>
                    </template>
                </van-field>

                <div class="title">请上传您身份证背面照，照片必须是清晰可辨的彩色原件电子版（扫描件或者数码拍摄照片）</div>
                <van-field name="uploader">
                    <template #input>
                        <van-uploader :max-count="1" v-model="IDbackphoto" :after-read="setIDbackphoto"
                                      :delete="delIDbackphoto"/>
                    </template>
                </van-field>

                <div class="title">请如实填写您本人联系电话号码，电话号码必须是使用您本人身份信息所办理</div>
                <van-field
                        v-model="mobile"
                        name="mobile"

                        placeholder="电话号码"
                        :rules="[{ required: true, message: '请填写电话号码' }]"
                />

                <div class="title">请如实填写您用本人信息所注册的邮箱账号，便于我们能及时联系您</div>
                <van-field
                        v-model="email"
                        name="email"
                        placeholder="邮箱账号"
                        :rules="[{ required: true, message: '请填写邮箱账号' }]"
                />

                <div class="title">请如实填写您用本人信息所注册的支付宝账号，便于我们能及时准确的转账到您的账户</div>
                <van-field
                        v-model="zfbacount"
                        name="zfbacount"
                        placeholder="支付宝账号"
                        :rules="[{ required: true, message: '请填写支付宝账号' }]"
                />

                <div class="title">请如实填写您用本人信息所办理的银行卡账号，便于我们能及时准确的转账到您的账户</div>

                <van-field
                        v-model="realname"
                        name="realname"
                        label="开户人姓名"
                        placeholder="姓名"
                        :rules="[{ required: true, message: '请填写姓名' }]"
                />
                <van-field
                        v-model="bankname"
                        name="bankname"
                        label="银行名称"
                        placeholder="名称"
                        :rules="[{ required: true, message: '请填写银行名称' }]"
                />
                <van-field
                        v-model="bankcard"
                        name="bankcard"
                        label="银行卡号"
                        placeholder="卡号"
                        :rules="[{ required: true, message: '请填写银行卡号' }]"
                />
                <van-field
                        v-model="address"
                        name="address"
                        label="现居住地址"
                        placeholder="现居住地址"
                        :rules="[{ required: true, message: '请填写现居住地址' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">预览</van-button>
                </div>
            </van-form>
        </template>
    </div>
</template>

<script>
    export default {
        name: "tixianInfo",
        data() {
            return {
                type: false,
                checked: true,
                mgphoto: [],
                mgphotoImg: '',
                IDfrontphoto: [],
                IDfrontphotoImg: '',
                IDbackphoto: [],
                IDbackphotoImg: '',
                mobile: '',
                email: '',
                zfbacount: '',
                bankname: '',
                realname: '',
                bankcard: '',
                address: '',
                fwarticle: '',
            }
        },
        mounted() {
            document.body.style.backgroundColor = "#ffffff";
            this.fwarticle = JSON.parse(this.$route.query.fwarticle);
        },
        beforeDestroy() {
            document.body.style.backgroundColor = "";
        },
        methods: {
            replacrImg(detailText) {
                detailText = detailText.replace(/<img[^>]*>/gi, function(match, capture) {
                    return match.replace(/(style="(.*?)")|(width="(.*?)")|(height="(.*?)")/ig,
                        'style="max-width:100%;height:auto;"') // 替换style
                });
                return detailText;
            },
            /* 显示内容 */
            showFwarticle(){
                this.fwarticle.content = this.replacrImg(this.fwarticle.content);
                this.$dialog.alert({
                    title: this.fwarticle.title,
                    message: this.fwarticle.content,
                    messageAlign: 'left'
                }).then(() => {
                });
            },
            onSubmit(val) {
                console.log(this.mgphoto);
                if (!this.mgphotoImg) return this.$toast('请上传免冠照');
                if (!this.IDfrontphotoImg) return this.$toast('请上传身份证正面照');
                if (!this.IDbackphotoImg) return this.$toast('请上传身份证背面照');
                this.type = !this.type;
                console.log(val);
            },
            /* 确认提交 */
            submitbtn() {
                let that = this;
                if (!that.checked) return this.$toast('请您再次核实并确认您所提交的资料真实、准确、合法、有效！');
                that.request1.post1({
                    url: that.Url + "api/user.tixian/txprofilesave",
                    params: {
                        mgphoto: that.mgphotoImg,
                        IDfrontphoto: that.IDfrontphotoImg,
                        IDbackphoto: that.IDbackphotoImg,
                        mobile: that.mobile,
                        email: that.email,
                        zfbacount: that.zfbacount,
                        bankname: that.bankname,
                        bankcard: that.bankcard,
                        realname: that.realname,
                        address: that.address,
                    },
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.$toast({
                                message: '上传成功',
                                type: 'success',
                                duration: 1200,
                                onClose: () => {
                                    that.$router.go(-1);
                                }
                            });
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg);
                    }
                })
            },
            delMgphoto() {
                console.log('是否触发');
                this.mgphotoImg = '';
            },
            delIDfrontphoto() {
                this.IDfrontphotoImg = '';
            },
            delIDbackphoto() {
                this.IDbackphotoImg = '';
            },
            //上传免冠
            setMgphoto(file) {
                file.status = 'uploading';
                file.message = '上传中';
                var that = this;
                let fd = new FormData();
                fd.append('file', file.file);

                that.$axios.post(
                    that.Url + "api/common/upload", fd, {}
                ).then(function (res) {
                    console.log(res)
                    if (res.data.code == 1) {
                        that.mgphotoImg = res.data.data.url;
                        file.status = 'done';
                        file.message = '上传成功';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                        that.$toast(res.data.msg);
                    }
                }).catch(function (error) {
                    file.status = 'failed';
                    file.message = '上传失败';
                    that.$toast(error.data.msg);
                })
            },
            //上传正面
            setIDfrontphoto(file) {
                file.status = 'uploading';
                file.message = '上传中';
                var that = this;
                let fd = new FormData();
                fd.append('file', file.file);

                that.$axios.post(
                    that.Url + "api/common/upload", fd, {}
                ).then(function (res) {
                    console.log(res)
                    if (res.data.code == 1) {
                        that.IDfrontphotoImg = res.data.data.url;
                        file.status = 'done';
                        file.message = '上传成功';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                        that.$toast(res.data.msg);
                    }
                }).catch(function (error) {
                    file.status = 'failed';
                    file.message = '上传失败';
                    that.$toast(error.data.msg);
                })
            },
            //上传背面
            setIDbackphoto(file) {
                file.status = 'uploading';
                file.message = '上传中';
                var that = this;
                let fd = new FormData();
                fd.append('file', file.file);

                that.$axios.post(
                    that.Url + "api/common/upload", fd, {}
                ).then(function (res) {
                    console.log(res)
                    if (res.data.code == 1) {
                        that.IDbackphotoImg = res.data.data.url;
                        file.status = 'done';
                        file.message = '上传成功';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                        that.$toast(res.data.msg);
                    }
                }).catch(function (error) {
                    file.status = 'failed';
                    file.message = '上传失败';
                    that.$toast(error.data.msg);
                })
            },
        }
    }
</script>

<style scoped>
    .box {
        background-color: #fff;
    }

    .title {
        font-size: 12px;
        padding: 15px;
    }

    .table-box {
        margin: 100px 0 20px 0;
        display: flex;
        justify-content: center;
    }

    /deep/ .van-checkbox {
        align-items: flex-start;
    }

    /deep/ .van-dialog__content >>> img{
        width: 100%;
    }
</style>